<template>
  <div class="main">
    <Header></Header>
    <div
      class="content"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="left">
        <div class="left-top">
          <div class="left-top-head">
            <div class="left-top-title">
              <div>
                <img src="../assets/icon1.png" alt="" />
              </div>
              <div>采样样本总趋势分析</div>
            </div>

            <div class="left-time">
              <div class="l-time">
                <div>
                  <span>年份</span>
                  <el-date-picker
                    v-model="caiyangYear"
                    type="year"
                    placeholder="选择年"
                    value-format="yyyy"
                    @change="caiyangYearChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>

              <div class="l-time">
                <div>
                  <span>月份</span>
                  <el-date-picker
                    type="month"
                    v-model="caiyangMonth"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                    @change="caiyangMonthChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>

              <div class="l-time">
                <div>
                  <span>日期</span>
                  <el-date-picker
                    type="date"
                    v-model="caiyangDate"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="caiyangDateChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>
          </div>

          <div class="left-top-echart">
            <v-chart
              :options="orgOptions1"
              class="echarts"
              :autoresize="true"
			  ref="orgOptions1"
            ></v-chart>
          </div>
        </div>
        <div class="left-bottom">
          <div class="left-bottom-head">
            <div class="left-bottom-title">
              <div>
                <img src="../assets/icon2.png" alt="" />
              </div>
              <div>检测人数总趋势分析</div>
            </div>

            <div class="left-time">
              <div class="l-time">
                <div>
                  <span>年份</span>
                  <el-date-picker
                    v-model="jianceYear"
                    type="year"
                    placeholder="选择年"
                    value-format="yyyy"
                    @change="jianceYearChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>

              <div class="l-time">
                <div>
                  <span>月份</span>
                  <el-date-picker
                    type="month"
                    v-model="jianceMonth"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                    @change="jianceMonthChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>

              <div class="l-time">
                <div>
                  <span>日期</span>
                  <el-date-picker
                    type="date"
                    v-model="jianceDate"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="jianceDateChange"
                    :clearable="false"
                    :picker-options="dateOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>
          </div>
          <div class="left-bottom-echart">
            <v-chart
              :options="orgOptions2"
              class="echarts"
              :autoresize="true"
			  ref="orgOptions2"
            ></v-chart>
          </div>
        </div>
      </div>
      <div class="right">
        <!--  <div class="right-head"> -->

        <!--  </div> -->
        <!-- <div class="tuli">
              <div class="zituli">
                <div class="yuandian1"></div><span>检测人数</span>
              </div>
              <div class="zituli">
                 <div class="yuandian2"></div><span>结果阴性</span>
              </div>
              <div class="zituli">
                 <div class="yuandian3"></div><span>检未出结果</span>
              </div>
              <div class="zituli">
                 <div class="yuandian4"></div><span>结果阳性</span>
              </div>
            </div>-->

        <div class="right-echart">
          <div class="right-title">
            <div>
              <img src="../assets/icon3.png" alt="" />
            </div>
            <div>乡镇/街道检测人数及结果分析</div>
          </div>
          <div class="btn">
            <span @click="excelOut">导出</span>
          </div>
          <v-chart
            :options="orgOptions3"
            class="echarts"
            :autoresize="true"
            ref="orgOptions3"
          ></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 动态生成路由代码
// @route('/sampling','sampling')
import Header from "@/components/header/header.vue";
//import $ from 'jquery'
export default {
  components: {
    Header,
  },
  data() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    var nowDate = year + "-" + month + "-" + day;
    return {
      orgOptions1: {
        grid: {
          left: 40,
          right: 20,
          top: 20,
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter(params) {
            for (var x in params) {
              return (
                params[x].name + "采样样本" + "<br>" + params[x].data + "个"
              );
            }
          },
          textStyle: {
            color: "#00f9f9",
          },
        },
        legend: {},
        color: ["#00f9f9"],
        xAxis: {
          minInterval: 1,
          axisTick: { show: false },
          type: "category",
          name: "",
          nameLocation: "end",
          nameTextStyle: {
            fontSize: 10,
            color: "#cccccc",
          },
          axisLabel: {
            color: "#cccccc",
            lineStyle: {
              color: "#cccccc",
            },
          },
        },
        yAxis: {
          show: true,
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              color: "#625d72",
            },
          },

          axisLabel: {
            color: "#cccccc",
          },
          minInterval: 1,
        },
        series: {
          type: "line",
          smooth: true,
          lineStyle: {
            width: 4,
          },
          data: [],
          symbol: "circle",
          itemStyle: {
            emphasis: {
              borderWidth: 6,
            },
          },
        },
      },
      orgOptions2: {
        grid: {
          left: 40,
          right: 20,
          top: 20,
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter(params) {
            for (var x in params) {
              return (
                params[x].name + "检测人数总数" + "<br>" + params[x].data + "人"
              );
            }
          },
          textStyle: {
            color: "#00f9f9",
          },
        },
        legend: {},
        color: ["#00f9f9"],
        xAxis: {
          axisTick: { show: false },
          type: "category",
          name: "",
          nameTextStyle: {
            color: "#cccccc",
          },
          axisLabel: {
            color: "#cccccc",
            lineStyle: {
              color: "#cccccc",
            },
          },
          data: [],
        },
        yAxis: {
          show: true,
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              color: "#625d72",
            },
          },
          minInterval: 1,
          axisLabel: {
            color: "#cccccc",
          },
        },
        series: {
          type: "line",
          symbol: "none",
          smooth: true,
          lineStyle: {
            width: 5,
          },
          data: [],
        },
      },
      orgOptions3: {
        grid: {
          left: 40,
          right: 20,
          top: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#00f9f9",
          },
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (i == 0) {
                str += `${params[i].name}<br/>${params[i].seriesName}：<span>${params[0].data}</span><br/>`;
                continue;
              }
              if (i == 1) {
                str += `${params[i].seriesName}：<span>${params[1].data}</span><br/>`;
                continue;
              }
              if (i == 2) {
                str += `${params[i].seriesName}：<span>${params[2].data}</span><br/>`;
                continue;
              }
              str += `${params[i].seriesName}：<span>${params[i].data}</span><br/>`;
            }
            return str;
          },
        },
        legend: {
          icon: "circle",
          top: 15,
          left: "45%",
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            nameTextStyle: {
              color: "#cccccc",
            },
            axisLabel: {
              color: "#cccccc",
              interval: 0,
              lineStyle: {
                color: "#cccccc",
              },
            },
            data: [],
            axisTick: { show: false },
          },
        ],
        yAxis: {
          show: false,
        },
        color: ["#00f9f9", "#44d8a8", "#ffcc00", "#e9346d"],
        series: [
          {
            name: "检测人数",
            type: "bar",
            barWidth: 12,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#cccccc",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            name: "结果阴性",
            type: "bar",
            barWidth: 12,
            barGap: 0,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#cccccc",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            name: "未出结果",
            type: "bar",
            barWidth: 12,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#cccccc",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            name: "结果阳性",
            type: "bar",
            barWidth: 12,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#cccccc",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      },
      caiyangYear: "",
      caiyangMonth: "",
      caiyangDate: nowDate,
      jianceYear: "",
      jianceMonth: "",
      jianceDate: nowDate,
      loading: false,
      dateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
    this.testPersonCount();
    this.samplingCount();
    this.testPersonAndResult();
  },
  methods: {

	  //导出
	  excelOut(){
		  // console.log('12')http://111.75.240.74:56794/zgq-epana-nucleate/api/nucleic/nucleic/testPersonAndResult/excelOut
		  window.open('https://gzsfy.ganzhou.gov.cn/zgq-epana-nucleate/api/nucleic/nucleic/testPersonAndResult/excelOut')
		//   this.$axios({
		//     url: "/api/nucleic/nucleic/testPersonAndResult/excelOut",
		//     method: "get",
		//     needAuth: true,
		//     headers: {
		//       "Content-Type": "application/json;charset=utf-8", // application/json
		//     },
		//   }).then((res) => {
			  
		// })
	  },
  

    //检测人数总趋势分析
    testPersonCount() {
      //  this.$refs.orgOptions2.showLoading({
      //   maskColor: "rgba(0, 0, 0, 0.5)",
      //   text: "loading",
      //   textColor: "#fff",
      // });
      let date,
        month,
        year = "";
      let type = "";
      if (this.jianceDate) {
        type = "time";
        year = this.jianceDate.substring(0, 4);
        month = this.jianceDate.substring(5, 7);
        date = this.jianceDate.substring(8, 10);
      } else if (this.jianceMonth) {
        type = "day";
        year = this.jianceMonth.substring(0, 4);
        month = this.jianceMonth.substring(5, 7);
      } else {
        type = "month";
        year = this.jianceYear.substring(0, 4);
      }
      this.$axios({
        url: "/api/nucleic/testPersonCount",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
        data: {
          year: year,
          month: month,
          date: date,
        },
      }).then((res) => {
        if (res.code == 200) {
          let date = res.data.map((item) => {
            if (type == "time") {
              return item.date + "时";
            }
            if (type == "day") {
              return item.date + "日";
            }
            if (type == "month") {
              return item.date + "月";
            }
            return item.date;
          });
          let count = res.data.map((item) => {
            return item.count;
          });
          /* console.log(date); */
          this.orgOptions2.xAxis.data = date;
          this.orgOptions2.series.data = count;
           setTimeout(() => {
            this.$refs.orgOptions2.hideLoading();
          }, 500);
        }
      });
    },
    //采样样本总趋势分析
    samplingCount() {
     
      let date,
        month,
        year = "";
      let type = "";
      if (this.caiyangDate) {
        type = "time";
        year = this.caiyangDate.substring(0, 4);
        month = this.caiyangDate.substring(5, 7);
        date = this.caiyangDate.substring(8, 10);
      } else if (this.caiyangMonth) {
        type = "day";
        year = this.caiyangMonth.substring(0, 4);
        month = this.caiyangMonth.substring(5, 7);
      } else {
        type = "month";
        year = this.caiyangYear.substring(0, 4);
      }
      this.$axios({
        url: "/api/nucleic/samplingCount",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
        data: {
          year: year,
          month: month,
          date: date,
        },
      }).then((res) => {
        if (res.code == 200) {
          let date = res.data.map((item) => {
            if (type == "time") {
              return item.date + "时";
            }
            if (type == "day") {
              return item.date + "日";
            }
            if (type == "month") {
              return item.date + "月";
            }
            return item.date;
          });
          let count = res.data.map((item) => {
            return item.count;
          });       
          this.orgOptions1.xAxis.data = date;
          this.orgOptions1.series.data = count;
         
        }
      });
    },

    //乡镇街道检测及结果
    testPersonAndResult() {    
      this.$axios({
        url: "/api/nucleic/testPersonAndResult",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          var country = [],
            yangCount = [],
            yinCount = [],
            checkCount = [],
            notResult = [];
          res.data.forEach((item) => {
            console.log(item);
            country.push(item.country);
            yangCount.push(item.yangCount);
            yinCount.push(item.yinCount);
            checkCount.push(item.checkCount);
            notResult.push(item.notResult);
          });
          this.orgOptions3.xAxis[0].data = country;
          this.orgOptions3.series[3].data = yangCount;
          this.orgOptions3.series[1].data = yinCount;
          this.orgOptions3.series[0].data = checkCount;
          this.orgOptions3.series[2].data = notResult;
          console.log(notResult);
           setTimeout(() => {
            this.$refs.orgOptions3.hideLoading();
          }, 500);
        }
      });
    },
    caiyangMonthChange() {
      this.caiyangDate = "";
      this.caiyangYear = "";
      this.samplingCount();
    },
    caiyangYearChange() {
      this.caiyangMonth = "";
      this.caiyangDate = "";
      this.samplingCount();
    },
    caiyangDateChange() {
      this.caiyangYear = "";
      this.caiyangMonth = "";
      this.samplingCount();
    },
    jianceYearChange() {
      this.jianceMonth = "";
      this.jianceDate = "";
      this.testPersonCount();
    },
    jianceMonthChange() {
      this.jianceYear = "";
      this.jianceDate = "";
      this.testPersonCount();
    },
    jianceDateChange() {
      this.jianceYear = "";
      this.jianceMonth = "";
      this.testPersonCount();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
/* 全局 */
.main {
  display: flex;
  background-size: 100% auto;
  // position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #020f17 !important;
  color: #ffffff;
}
.content {
  flex: 1;
  overflow: hidden;
  display: flex;
}
/* 左边区域 */
.left {
  display: flex;
  flex: 3;
  flex-direction: column;
  margin-top: 30px;
}
.left-top {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 左边第一个图 */
.left-top-head {
  height: 20%;
  width: 100%;
  display: flex;
  position: relative;
}
/* 左边第一个图标题 */
.left-top-title {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.left-top-title > div:first-child {
  margin-left: 40px;
}
.left-top-title > div:last-child {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 0px;
  color: #ffffff;
  margin-left: 14px;
}
/* 左边第一个图时间部分 */
.left-time {
  display: flex;
  margin-left: 10px;
}
.l-time {
  display: flex;
  div {
    margin-top: 10px;
    cursor: pointer;
    span {
      font-size: 14px;
      margin-right: 10px;
    }
    margin-right: 20px;
    /deep/.el-input__inner {
      background: rgba(0, 226, 227, 0.1);
      border: none;
      border-radius: 40px;
    }
  }
}
.left-top-echart {
  width: 100%;
  height: 80%;
}
.echarts {
  height: 100%;
  width: 100%;
}
/* 左边第二个图 */
.left-bottom {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.left-bottom-head {
  height: 20%;
  width: 100%;
  display: flex;
  position: relative;
}
/* 左边第一个图标题 */
.left-bottom-title {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.left-bottom-title > div:first-child {
  margin-left: 40px;
}
.left-bottom-title > div:last-child {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 0px;
  color: #ffffff;
  margin-left: 14px;
}
/* 左边第一个图时间部分 */
.left-bottom-time {
  display: flex;
  width: 660px;
  height: 31px;
  position: absolute;
  right: 23px;
}
.left-bottom-echart {
  width: 100%;
  height: 80%;
}
.right {
  display: flex;
  flex: 2;
  flex-direction: column;
  margin-top: 30px;
}
/* .right-head {
  height: 10%;
  width: 100%;
  margin-top: 50px;
  display: flex;
  position: relative;
} */
/* 右边第一个图标题 */
.right-echart {
  width: 100%;
  height: 100%;
  position: relative;
}
.right-title {
  display: flex;
  cursor: pointer;
  align-items: center;
  position: absolute;
  left: 10px;
  top: 10px;
}
/* .tuli{
  display: flex;
  cursor: pointer;
  font-size: 12px;
}
.zituli{
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.zituli>span{
  margin-left: 5px;
}
.yuandian1{
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #00e3e4;
}
.yuandian2{
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #44d8a8;
}
.yuandian3{
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #ffcc00;
}
.yuandian4{
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #e9346d;
}

 */
.btn {
  width: 70px;
  height: 40px;
  background: url("../assets/daochu.png") no-repeat;
  background-size: 100% 100%;
  font-size: 18px;
  text-align: center;
  padding: 10px 0 0 0;
  position: absolute;
  margin-left: 680px;
  color: #ffffff;
  cursor: pointer;
  z-index:100;
  }
.right-title > div:first-child {
  margin-left: 40px;
  cursor: pointer;
}
.right-title > div:last-child {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 0px;
  color: #ffffff;
  margin-left: 14px;
}
</style>